<template>
  <div ref="selectBox">
    <a-select
      v-model="nValue"
      style="width: 100%;"
      showSearch
      :filterOption="filterOption"
      :placeholder="placeholder"
      @change="change"
      :getPopupContainer="()=>this.$refs.selectBox"
      allowClear
    >
      <a-select-option v-for="item in TypeList" :key="item.DicValue" :value="nameofvalue=='name'?item.DicName:item.DicValue" style="white-space: wrap">
        {{ item.DicName }}
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
export default {
  data () {
    return {
      nValue: '',
      TypeList: []
    }
  },
  props: {
    value: {

      validator (value) {
        if (typeof value === 'undefined') {
          return true
        }
        if (typeof value === 'object') {
          return true
        }
        if (typeof value === 'string') {
          return true
        }
        if (typeof value === 'number') {
          return true
        }
      },
      required: true }, // 必填
    keyword: { type: String, default: '', required: true }, // 必填 字典值
    placeholder: { type: String, default: '请选择', required: false },
    nameofvalue: { type: String, default: 'value', required: false },
    list: { type: Array, default: undefined, required: false }// 选填 如传list则不请求字典列表 用于表格内容过多时，避免过多请求
  },
  components: {},
  methods: {
    change () {
      this.$emit('input', this.nValue)
      this.$emit('change', this.nValue)
      const obj = this.TypeList.find(item => {
        return item.DicValue === this.nValue
      })
      this.$emit('rowchange', obj)
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getDataList () {
      this.$http.post('/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey', {
        'Condition': 'DicKey',
        'Keyword': this.keyword
      }).then(res => {
        if (res.Success) {
          this.TypeList = res.Data.DictionaryDetailsList || []
        }
      })
    }
  },
  mounted () {},
  created () {},
  computed: {},
  watch: {
    keyword: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n) {
          if (this.list && this.list.length > 0) {
            this.TypeList = [...this.list]
            return
          }
          this.getDataList()
        }
      }
    },
    value: {
      deep: true,
      immediate: true,
      handler (n, o) {
        this.nValue = n
      }
    },
    list: {
      deep: true,
      immediate: true,
      handler (n, o) {
        if (n && n.length > 0) {
          this.TypeList = [...n]
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>

/deep/ .ant-select-dropdown-menu-item{
    white-space:initial !important;
}

</style>
